<template>
  <div class="div1">
    <br>
    <div class="div-home" style="text-align: center">
      创建房间
    </div>
    <div class="center-div1">
      <div style="margin-top: 60px; margin-left: 330px;height: 600px;width: 1200px;display: flex;
    flex-wrap: wrap;justify-content: center;
    align-content: flex-start;">
        <div class="column" v-for="(image, index) in images" :key="index">
          <img :src="image.src" :alt="image.alt" onmouseover="this.style.cursor='pointer'"
               onmouseout="this.style.cursor='auto'"
               style="height: 100px;width: 100px;border-radius: 8px;margin-top: 5px;"
               @click="wzry(image)"/>
          <p class="p"  style="color: aliceblue;">{{ image.name }}</p>
        </div>
      </div>
      <div class="div2">
        <p v-for="item in xh" :key="item.id" @click="shanchu(item.id,item.name)"
           style="cursor: pointer;font-size: 25px;color: #040404">
           <img :src="item.src" style="height: 100px;width: 100px;border-radius: 8px">
        </p>
      </div>
      <br><br>
      <div class="input" style="margin-left: 45px">
        <input style="height: 50px;width: 150px;background-color: transparent;border: 0;border-bottom: #f1f2f3 1px solid; /* 去除边框 */
  border-radius: 10px;" placeholder="房间名" type="text" name="phone" v-model="username">
      </div>
      <br><br><br>
        <el-button type="warning" style="height: 50px;width: 120px;margin-top:30px;margin-left: 50px" @click="fang">
          <span style="font-size: 21px">创房111</span></el-button>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import Cookies from 'js-cookie'

export default {
  data () {
    return {
      images: [
        {
          id: 1,
          src: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.orl2ANXnXWlBJ9Kmz9-NQQHaHa?rs=1&pid=ImgDetMain',
          alt: '描述1',
          name: '王者荣耀',
          typeID: '1'
        },
        {
          id: 2,
          src: 'https://img0.baidu.com/it/u=1198019525,3962047132&fm=253&fmt=auto&app=138&f=PNG?w=182&h=182',
          alt: '描述2',
          name: '永杰无间',
          typeID: '1'

        },
        {
          id: 3,
          src: 'https://img1.baidu.com/it/u=776041653,4145761871&fm=253&fmt=auto&app=138&f=PNG?w=243&h=243',
          alt: '描述3',
          name: '和平精英',
          typeID: '1'
        },
        {
          id: 4,
          src: 'https://img2.baidu.com/it/u=3265136240,2117388993&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          alt: '描述3',
          name: '决战平安京',
          typeID: '1'
        },
        {
          id: 5,
          src: 'https://img0.baidu.com/it/u=4170121870,2546745817&fm=253&fmt=auto&app=138&f=PNG?w=182&h=182',
          alt: '描述3',
          name: '蛋仔派对',
          typeID: '1'
        },
        {
          id: 6,
          src: 'https://img0.baidu.com/it/u=3110671790,975176726&fm=253&fmt=auto&app=138&f=JPEG?w=492&h=492',
          alt: '描述3',
          name: '光遇',
          typeID: '1'
        },
        {
          id: 7,
          src: 'https://img2.baidu.com/it/u=3060998169,940556171&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1711558800&t=2184779fb8d16fa0dd81d88670bdb0fc',
          alt: '描述3',
          name: '金铲铲之战',
          typeID: '1'
        },
        {
          id: 8,
          src: 'https://img2.baidu.com/it/u=1034230227,3964592880&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300',
          alt: '描述3',
          name: '小说',
          typeID: '1'
        },
        {
          id: 9,
          src: 'https://img0.baidu.com/it/u=412083601,602256431&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          alt: '描述3',
          name: '动漫',
          typeID: '1'
        },
        {
          id: 10,
          src: 'https://img1.baidu.com/it/u=3205206723,1324066176&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=888',
          alt: '描述3',
          name: '电视剧',
          typeID: '1'
        },
        {
          id: 11,
          src: 'https://img2.baidu.com/it/u=2927856275,3850698084&fm=253&fmt=auto&app=138&f=JPEG?w=325&h=270',
          alt: '描述3',
          name: '短视频',
          typeID: '1'
        },
        {
          id: 12,
          src: 'https://wkyx520.com/uploads/20220812/cb184b08ea631be24eca09a77ed23790.png',
          alt: '描述3',
          name: '代号鸢',
          typeID: '1'
        },
        {
          id: 13,
          src: 'https://img2.baidu.com/it/u=484042769,4207141710&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500',
          alt: '描述3',
          name: '音乐',
          typeID: '1'
        },
        {
          id: 14,
          src: 'https://img0.baidu.com/it/u=2976191612,202015650&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          alt: '描述3',
          name: '聊天',
          typeID: '1'
        },
        {
          id: 15,
          src: 'https://img0.baidu.com/it/u=494019916,4022817509&fm=253&fmt=auto&app=138&f=JPEG?w=438&h=500',
          alt: '描述3',
          name: '配音',
          typeID: '1'
        },
        {
          id: 16,
          src: 'https://img0.baidu.com/it/u=4181854346,3094659711&fm=253&fmt=auto&app=138&f=JPEG?w=507&h=500',
          alt: '描述3',
          name: '唱歌',
          typeID: '1'
        },
        {
          id: 17,
          src: 'https://img0.baidu.com/it/u=1952927254,1182784485&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
          alt: '描述3',
          name: '二次元',
          typeID: '1'
        },
        {
          id: 18,
          src: 'https://img2.baidu.com/it/u=1947536359,2733086433&fm=253&fmt=auto&app=138&f=JPEG?w=441&h=444',
          alt: '描述3',
          name: '吃瓜',
          typeID: '1'
        },
        {
          id: 19,
          src: 'https://img1.baidu.com/it/u=1472316364,1696937678&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313',
          alt: '描述3',
          name: '美食',
          typeID: '1'
        },
        {
          id: 20,
          src: 'https://img1.baidu.com/it/u=1095933062,3528698511&fm=253&fmt=auto&app=138&f=JPEG?w=694&h=500',
          alt: '描述3',
          name: '运动',
          typeID: '1'
        },
        {
          id: 21,
          src: 'https://img2.baidu.com/it/u=1831643940,2853464775&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=888',
          alt: '描述3',
          name: '生活',
          typeID: '1'
        }
      ],
      xh: [],
      username: '',
      user: Cookies.get('use') ? JSON.parse(Cookies.get('use')) : {}
    }
  },
  methods: {
    wzry (image) {
      const index = this.xh.findIndex(images => images.id === image.id)
      if (index === -1) {
        const number = this.xh.findIndex(typeIDs => typeIDs.typeID === image.typeID)
        if (number === -1) {
          const ah = {
            id: image.id,
            name: image.name,
            typeID: image.typeID,
            src: image.src
          }
          this.xh.push(ah)
          this.$notify.success('您选择了' + image.name)
        } else {
          // eslint-disable-next-line array-callback-return
          this.xh = this.xh.filter((o) => {
            return o.typeID !== image.typeID
          })
          const ah = {
            id: image.id,
            name: image.name,
            typeID: image.typeID,
            src: image.src
          }
          this.xh.push(ah)
        }
      } else {
        this.$notify.error('您已选择' + image.name)
      }
    },
    shanchu (id, name) {
      this.xh = this.xh.filter((o) => {
        return o.id !== id
      })
      this.$notify.info('您已取消添加' + name)
      console.log(this.xh)
    },
    fang () {
      console.log(this.xh.length)
      if (this.xh.length < 1) {
        this.$notify.error('请选择您的类型')
      } else if (this.username === '') {
        this.$notify.error('请为您的房间起一个名字')
      } else {
        axios.defaults.withCredentials = true
        axios({
          url: 'http://152.136.143.223:9091/room/createRoom',
          method: 'post',
          params: {
            roomUID: this.user.uid,
            roomName: this.username,
            roomType: this.xh[0].name
          }
        }).then((res) => {
          this.$notify.success('创建成功')
          this.$router.push({
            name: 'accroom',
            query: { room: JSON.stringify(res.data.data) }
          })
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.div1 {
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(https://www.bing.com/th/id/OGC.6592d6c38970f023f8e7d0cf5cd867d3?pid=1.7&rurl=http%3a%2f%2fimg95.699pic.com%2fphoto%2f40139%2f0939.gif_wh860.gif&ehk=HYiLTNhKdtKpiZZ7V%2fr45uWESKAgIOGbFZvl%2fg2TPdc%3d);
  background-position: center; /* 或者你想要的任何位置 */
  overflow: hidden; /* 确保内容不会溢出 */
  position: fixed; /* 将#app定位为固定位置 */
  top: 0;
  left: 0;
}
.div-home {
  line-height: 24px;
  font-weight: 600;
  -webkit-transform: skew(-10deg);
  -ms-transform: skew(-10deg);
  transform: skew(-10deg);
  white-space: nowrap;
  font-size: 55px;
  color: #ffffff;
}

li {
  float: left;
  margin: 20px;
  list-style-type: none;
  font-size: 20px;
  text-align: center;
  height: 35px;
  width: 90px;
  color: white;
}

.column {
  //background-color: #a21a1a;
  width: 150px;
  height: 150px;
  margin: 8px;
  text-align: center;
  margin-top: 30px;
}

.div2 {
  height: 200px;
  width: 150px;
  //background-color: #5151d7;
  margin-top: -550px;
  margin-left: 45px;
  overflow: auto; /* 添加滚动条 */
  //border: 2px solid #635555;
  text-align: center;
  padding: 10px;
}
</style>
